<!-- 包装信息模块 -->
<script lang="jsx" setup>
import { computed, ref } from 'vue';
import { Empty } from 'ant-design-vue';
import { getPackInfo } from '@/service/api/modules/trace/one-code-trace';

const simpleImage = Empty.PRESENTED_IMAGE_DEFAULT;

const lotId = ref(null);

const list = ref([]);

function setCurrentLotId(value) {
  lotId.value = value;
}

const qty = computed(() => {
  return list.value.reduce((acc, cur) => acc + Number(cur.qty), 0);
});

function getData() {
  getPackInfo({ lotNo: lotId.value, pageSize: 99999, pageNum: 1 }).then(({ data, error }) => {
    if (!error) {
      console.log(data);
      list.value = data.list;
    }
  });
}
function reset() {
  list.value = [];
}

defineExpose({
  setCurrentLotId,
  getData,
  reset
});
</script>

<template>
  <div class="package-info h-full w-full">
    <div v-if="list.length" class="card-list">
      <ARow :gutter="[15, 15]" class="h-full w-full">
        <ACol v-for="item in list" :key="item.packNo" :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
          <ACard>
            <template #title>
              <div class="card-title">包装号:{{ item.packNo }}</div>
            </template>
            <div class="list">
              <div class="list-item w-100%">
                <div class="label">出货数量</div>
                <div class="value">{{ item.qty }}({{ item.unit }})</div>
              </div>
              <div class="list-item w-100%">
                <div class="label">出货人</div>
                <div class="value">{{ item.createBy }}</div>
              </div>
              <div class="list-item w-100%">
                <div class="label">出货时间</div>
                <div class="value">{{ item.updateDate }}</div>
              </div>
            </div>
          </ACard>
        </ACol>
      </ARow>
    </div>
    <div v-else class="no-data h-full w-full flex-center">
      <AEmpty :image="simpleImage" description="暂无出货信息" />
    </div>
    <div v-if="list.length" class="footer">
      <div class="list-item">
        <div class="label">客户型号</div>
        <div class="value">{{ list[0].custProdNo }}</div>
      </div>
      <div class="list-item">
        <div class="label">总出货数量</div>
        <div class="value color-#646cff">
          <u>{{ qty }}</u>
          ({{ list[0].unit }})
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.package-info {
  padding-top: 10px;
  overflow-y: auto;
  .list {
    display: flex;
    flex-wrap: wrap;
    .list-item {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      font-size: 14px;
      flex-grow: 1;
      margin-bottom: 8px;
      .label {
        color: #aeaeae;
        font-weight: bold;

        &::after {
          content: ':';
          margin: 0 3px;
        }
      }
      .value {
        flex: 1;
      }
    }
  }

  :deep(.ant-card) {
    .ant-card-body {
      padding: 15px;
    }
  }

  .card-title {
    display: flex;
    align-items: center;
    &:before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #646cff;
      margin-right: 5px;
    }
  }

  .card-list {
    height: calc(100% - 30px);
    overflow-y: auto;
  }

  .footer {
    height: 30px;
    line-height: 30px;
    display: flex;
    gap: 15px;
    .list-item {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      font-size: 16px;
      margin-bottom: 8px;

      .label {
        color: #aeaeae;
        font-weight: bold;

        &::after {
          content: ':';
          margin: 0 3px;
        }
      }
    }
  }
}
</style>
